<div>
    <div class="content d-flex flex-column flex-column-fluid">

        <sub-header [title]="'DeviceEdit' | localize" [description]="device?.id + '|' + device?.name">
            <div action="back"><i class="icon-fanhui text-info" (click)="goBack()"></i></div>
            <div role="actions">
                
            </div>
        </sub-header>


        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <form #deviceInfooperationForm="ngForm" novalidate autocomplete="off">

                        <tabset>
                            <tab heading="{{l('BaseMsg')}}" class="pt-5" customClass="m-tabs__item icon-artboard13"
                                style="position: relative;" *ngIf="checkAbility('BaseMsg')">
                                <form style="width: 100%" novalidate="" #deviceInfooperationForm="ngForm">
                                    <div class="freeze-ui" style="position:absolute;" *ngIf="showFreezeUi"></div>
                                    <div class="freeze-ui" style="position:absolute;" *ngIf="showFreezeUi"></div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label class="control-label"
                                                for="hardwareCode">{{l('hardwareCode')}}</label>
                                            <input class="form-control " pattern="[0-9a-zA-Z]*" id="hardwareCode"
                                                name="hardwareCode" [(ngModel)]="device.hardwareCode" type="text"
                                                maxlength="64">

                                        </div>
                                        <div class="form-group col-6">
                                            <label class="control-label" for="outerId">{{l('outId')}}</label>
                                            <input class="form-control" id="outerId" name="outerId"
                                                [(ngModel)]="device.outerId" type="text" maxlength="64">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label class="control-label">{{l('name')}}</label>
                                            <input class="form-control " id="name" required name="name" maxlength="32"
                                                [(ngModel)]="device.name" type="text">
                                        </div>
                                        <div class="form-group col-6">
                                            <label class="control-label"
                                                for="shutdownTime">{{l('shutdownTime')}}</label>
                                            <input class="form-control" [(ngModel)]="shutdownTime" id="shutdownTime"
                                                name="shutdownTime" placeholder="关机时间" type="time">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label class="control-label" for="mac">{{l('Mac')}}*</label>
                                            <input class="form-control "
                                                pattern="^[A-F0-9]{2}(-[A-F0-9]{2}){5}$|^[A-F0-9]{2}(:[A-F0-9]{2}){5}$|^[A-F0-9]{12}$"
                                                id="mac" name="mac" placeholder="00E04C6AEA55"
                                                onfocus="this.placeholder=''" onblur="this.placeholder='00E04C6AEA55'"
                                                type="text" [(ngModel)]="device.mac">
                                        </div>
                                        <div class="form-group col-6">
                                            <label class="control-label" for="intranetIP">{{l('IpAddress')}}</label>
                                            <input class="form-control" id="intranetIP" name="intranetIP" type="text"
                                                [(ngModel)]="device.intranetIP" placeholder="192.168.1.20"
                                                onfocus="this.placeholder=''" onblur="this.placeholder='192.168.1.20'">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-3">
                                            <label class="control-label" for="osType">{{l('os')}}</label>
                                            <select #osType="ngModel" [(ngModel)]="device.osType" name="osType"
                                                class="form-control">
                                                <!-- <option value=""></option> -->
                                                <option value="0">Windows</option>
                                                <option value="1">Android</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-3">
                                            <label class="control-label"></label>
                                            <input class="form-control" id="os" name="os" type="text"
                                                [(ngModel)]="device.os" placeholder="windows 10"
                                                onfocus="this.placeholder=''" onblur="this.placeholder='windows 10'"
                                                style="position:relative;top:7px;">

                                        </div>


                                        <div class="form-group col-6">
                                            <label class="control-label" for="subKey">{{l('subKey')}}</label>
                                            <input class="form-control " disabled="" id="subKey" name="subKey"
                                                type="text" [(ngModel)]="device.subKey">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-3">
                                            <label class="control-label">{{l('resolution')}}</label>
                                            <input class="form-control " name="width" type="text"
                                                [(ngModel)]="device.resolution_Width" placeholder="width"
                                                onfocus="this.placeholder=''" onblur="this.placeholder='width'">
                                        </div>
                                        <div class="form-group col-3">
                                            <label class="control-label"></label>
                                            <input class="form-control " style="margin-top: 6px;" name="height"
                                                type="text" [(ngModel)]="device.resolution_Height" placeholder="height"
                                                onfocus="this.placeholder=''" onblur="this.placeholder='height'">
                                        </div>
                                        <div class="form-group col-6">
                                            <label class="control-label" for="peripheralIds">{{l('Peripheral')}}</label>
                                            <p-autoComplete [(ngModel)]="peripheralIds" [suggestions]="devicePeriList"
                                                (completeMethod)="filterPeri($event)" field="selectValue"
                                                dataKey="selectKey" placeholder="{{l('Peripheral')}}" [minLength]="1"
                                                name="MultiSelectInput" inputStyleClass="form-control"
                                                [forceSelection]="true" (onSelect)="assignPeri()"
                                                (onUnselect)="assignPeri()" (onBlur)="clearInput($event)"
                                                [multiple]="true" styleClass="width-percent-100" [dropdown]="true">
                                            </p-autoComplete>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label class="control-label" for="address">{{l('address')}}</label>
                                            <input class="form-control " id="address" name="address" type="text"
                                                [(ngModel)]="device.address" placeholder="room 103,linghu"
                                                maxlength="300">
                                        </div>
                                        <div class="form-group col-6">
                                            <label class="control-label"
                                                for="onlineTrafficTarget">{{l('onlineTrafficTarget')}}</label>
                                            <select class="form-control " id="onlineTrafficTarget"
                                                name="onlineTrafficTarget" [(ngModel)]="device.onlineTrafficTarget">
                                                <option [value]="onlineStore.value"
                                                    *ngFor="let onlineStore of onlineStoreInfo">{{onlineStore.name}}
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label class="control-label" for="deviceTypeId">{{l('DeviceType')}}*</label>
                                            <select class="form-control " id="deviceTypeId" name="deviceTypeId" required
                                                [(ngModel)]="device.deviceTypeId" (change)="changeType()">
                                                <option [value]="deviceType.value"
                                                    *ngFor="let deviceType of deviceTypeList">{{deviceType.name}}
                                                </option>
                                            </select>
                                        </div>
                                        <div class="form-group col-6">
                                            <label class="control-label" for="groupStore">{{l('belongStore')}}</label>
                                            <input name="storeName" class="form-control " [(ngModel)]="device.storeName"
                                                type="text" readonly />
                                        </div>
                                    </div>




                                    <!-- 传感器终端 -->
                                    <div class="row">
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==18">
                                            <div class="form-group">
                                                <label>{{l("gateWayType")}}</label>
                                                <select [(ngModel)]="gatewayType" name="gatewayType"
                                                    class="form-control" required>
                                                    <option value="0">{{l("passiveGateWay")}}</option>
                                                    <option value="1">{{l("activeGateWay")}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==18">
                                            <div class="form-group">
                                                <label>{{l("pollingTime")}} ({{l("seconds")}})</label>
                                                <input [(ngModel)]="pollingTime" class="form-control" type="number"
                                                    name="pollingTime" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==18&&gatewayType==1">
                                            <div class="form-group">
                                                <label>{{l("sensorType")}}</label>
                                                <select [(ngModel)]="agreementId" name="agreementId"
                                                    class="form-control" [disabled]="agreementList.length==0" required>
                                                    <option value=""></option>
                                                    <option *ngFor="let item of agreementList" [value]="item.id">
                                                        {{item.name}}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>




                                    <!-- 传感器 -->
                                    <div class="row">
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==19">
                                            <div class="form-group">
                                                <label>{{l("belongGateWay")}}</label>
                                                <select [(ngModel)]="belongGateWay2" name="belongGateWay2"
                                                    class="form-control" [disabled]="gatewayList2.length==0">
                                                    <option value=""></option>
                                                    <option *ngFor="let item of gatewayList2" [value]="item.id">
                                                        {{item.name}}</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-6"
                                            *ngIf="device.deviceTypeId==19&&(fromGatewayType==0||fromGatewayType==1)">
                                            <div class="form-group">
                                                <label>{{l("addressCode")}}</label>
                                                <input [(ngModel)]="addressCode" class="form-control" type="text"
                                                    name="addressCode" required>
                                            </div>
                                        </div>

                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==19&&fromGatewayType==0">
                                            <div class="form-group">
                                                <label>{{l("sensorType")}}</label>
                                                <select [(ngModel)]="agreementId" name="agreementId"
                                                    class="form-control" [disabled]="agreementList.length==0" required>
                                                    <option *ngFor="let item of agreementList" [value]="item.id">
                                                        {{item.name}}</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==19&&fromGatewayType==0">
                                            <div class="form-group">
                                                <label>{{l("pollingCommand")}}</label>
                                                <input [(ngModel)]="command" class="form-control" type="text"
                                                    name="command" required>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="form-row">
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==4">
                                            <div class="form-group">
                                                <label>{{l("belongGateWay")}}</label>
                                                <select [(ngModel)]="belongGateWay" name="belongGateWay"
                                                    class="form-control" (change)="changeGateWay()">
                                                    <option value=""></option>
                                                    <option *ngFor="let item of gatewayList" [value]="item.id">
                                                        {{item.name}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==23||device.deviceTypeId==20">
                                            <div class="form-group">
                                                <label>{{l("belongGateWay")}}</label>
                                                <select [(ngModel)]="belongGateWay" name="belongGateWay"
                                                    class="form-control">
                                                    <option value=""></option>
                                                    <option *ngFor="let item of gatewayList3" [value]="item.id">
                                                        {{item.name}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==23">
                                            <div class="form-group">
                                                <label>{{l("LayerOrderNumber")}}</label>
                                                <input [(ngModel)]="LayerOrderNumber" class="form-control" type="number"
                                                    name="LayerOrderNumber">
                                            </div>
                                        </div>
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==23">
                                            <div class="form-group">
                                                <label>{{l("row")}}Id</label>
                                                <select [(ngModel)]="LayerThingId" name="LayerThingId"
                                                    class="form-control">
                                                    <option value=""></option>
                                                    <option *ngFor="let item of LayerThingIdList"
                                                        [value]="item.layerId">
                                                        {{item.index}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6" *ngIf="device.deviceTypeId==20">
                                            <div class="form-group">
                                                <label>{{l("cargoLaneId")}}</label>
                                                <select [(ngModel)]="LayerThingId" name="cargoLaneId"
                                                    class="form-control">
                                                    <option value=""></option>
                                                    <option *ngFor="let item of LayerThingIdList" [value]="item.id">
                                                        {{item.name}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>


                                    <!-- <div class="row">
                                    <div class="form-group col-3" style="position:relative;margin:1rem 0;"
                                        *ngFor="let ability of abilities">
                                        <label class="kt-checkbox kt-checkbox--primary"
                                            style="position:absolute;top:50%;">
                                            <input class="form-control" [(ngModel)]="ability.active" type="checkbox"
                                                [name]="ability.name"
                                                style="width: 1rem;display: inline-block;height: 1rem;" />{{l(ability.name)}}
                                            <span></span>
                                        </label>
                                    </div>
                                </div> -->


                                    <div class="form-row" style="margin-top: 1rem;">
                                        <div class="form-group col-12">
                                            <label class="control-label" for="description">{{l('description')}}</label>
                                            <textarea class="form-control " id="description" name="description"
                                                [(ngModel)]="device.description" placeholder="{{l('description')}}"
                                                maxlength="3000"></textarea>
                                        </div>
                                    </div>

                                    <div class="form-row" *ngIf="!appSession.tenant">
                                        <div class="form-group col-12">
                                            <label class="m-checkbox checkbox-success" for="isLocked">
                                                <input type="checkbox" [(ngModel)]="device.isLocked" id="isLocked"
                                                    name="isLocked">
                                                {{l('isTest')}}
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <div class="col-12 text-right">
                                            <button class="btn btn-primary" (click)="goBack()">{{l('Back')}}</button>
                                            <button class="btn btn-primary"
                                                [disabled]="!deviceInfooperationForm.form.valid" [buttonBusy]="saving"
                                                [busyText]="l('SavingWithThreeDot')" type="submit" (click)="save()">
                                                <i class="fa fa-save"></i>{{l('Save')}}</button>
                                        </div>
                                    </div>
                                </form>
                            </tab>
                            <tab heading="{{l('Advertisement')}}" class="pt-5" customClass="m-tabs__item icon-guanggao"
                                *ngIf="checkAbility('Advertisement')&&isGranted('Pages.Tenant.Ads')&&appSession.tenant"
                                (selectTab)="getAdsByDeviceId($event)">
                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center mb-4">
                                                <div class="col-4">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <div class="input-group">
                                                            <input [(ngModel)]="adsFilterText" name="filterText"
                                                                (keyup.enter)="getAdsByDeviceId()" autoFocus
                                                                class="form-control m-input" [placeholder]="l('name')"
                                                                type="text">
                                                            <span class="input-group-btn">
                                                                <button (click)="getAdsByDeviceId()"
                                                                    class="btn btn-primary" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-8" style="text-align: right;"
                                                    *ngIf="isGranted('Pages.Tenant.Ads.Publish')">
                                                    <div class="form-group">
                                                        <button type="button" (click)="deleteBatchAd()"
                                                            class="btn btn-primary blue">
                                                            <i class="icon-piliangcaozuo"></i>
                                                            {{l("deleteBatch")}}</button>
                                                        <button type="button" class="btn btn-primary icon-add"
                                                            (click)="createAdForDevice()">{{l('add')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pAds.isLoading">
                                        <app-image-grid style="width: 100%;" gridOwner="ads" mode="1"
                                            judgeOnline="false" (onOperate)="onOperateAds($event)"
                                            (onLazyLoad)="getAdsByDeviceId($event)" [(selection)]="AdsSelectionList"
                                            [imageList]="pAds.records"></app-image-grid>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pAds.defaultRecordsCountPerPage" #paginatorAds
                                                (onPageChange)="getAdsByDeviceId()"
                                                [totalRecords]="pAds.totalRecordsCount"
                                                [rowsPerPageOptions]="pAds.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pAds.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('Apps')}}" class="pt-5" customClass="m-tabs__item icon-yingyong"
                                *ngIf="checkAbility('Apps')&&isGranted('Pages.Softwares')&&appSession.tenant"
                                (selectTab)="getSoftwareByDeviceId()">
                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center mb-4">
                                                <div class="col-4">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <div class="input-group">
                                                            <input [(ngModel)]="softwareFilterText"
                                                                name="softwareFilterText"
                                                                (keyup.enter)="getSoftwareByDeviceId()" autoFocus
                                                                class="form-control m-input" [placeholder]="l('name')"
                                                                type="text">
                                                            <span class="input-group-btn">
                                                                <button (click)="getSoftwareByDeviceId()"
                                                                    class="btn btn-primary" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-8" style="text-align: right;">
                                                    <div class="form-group"
                                                        *ngIf="isGranted('Pages.Softwares.Publish')">
                                                        <button type="button" (click)="deleteBatchApp()"
                                                            class="btn btn-primary blue">
                                                            <i class="icon-piliangcaozuo"></i>
                                                            {{l("deleteBatch")}}</button>
                                                        <button type="button" class="btn btn-primary icon-add"
                                                            (click)="createAppForDevice()">{{l('add')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pApp.isLoading">
                                        <app-image-grid id="gridShow" style="width: 100%;" gridOwner="app" mode="2"
                                            judgeOnline="false" (onOperate)="onOperateSoftware($event)"
                                            (onLazyLoad)="getSoftwareByDeviceId($event)"
                                            [(selection)]="SoftwareSelectionList" [imageList]="pApp.records">
                                        </app-image-grid>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pApp.defaultRecordsCountPerPage" #paginatorSoftware
                                                (onPageChange)="getSoftwareByDeviceId()"
                                                [totalRecords]="pApp.totalRecordsCount"
                                                [rowsPerPageOptions]="pApp.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pApp.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('Product')}}" class="pt-5" [active]="initTab=='product'"
                                customClass="m-tabs__item icon-product"
                                *ngIf="checkAbility('Product')&&isGranted('Pages.Tenant.Products')&&appSession.tenant"
                                (selectTab)="getProductByDeviceId()">
                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center m--margin-bottom-10">
                                                <div class="col-4">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <div class="input-group">
                                                            <input [(ngModel)]="productFilterText"
                                                                name="productFilterText"
                                                                (keyup.enter)="getProductByDeviceId()" autoFocus
                                                                class="form-control m-input" [placeholder]="l('name')"
                                                                type="text">
                                                            <span class="input-group-btn">
                                                                <button (click)="getProductByDeviceId()"
                                                                    class="btn btn-primary" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-8" style="text-align: right;"
                                                    *ngIf="isGranted('Pages.Tenant.Products.Publish')">
                                                    <div class="form-group">
                                                        <button type="button" (click)="deleteBatchProduct()"
                                                            class="btn btn-primary blue">
                                                            <i class="icon-piliangcaozuo"></i>
                                                            {{l("deleteBatch")}}</button>
                                                        <button type="button" class="btn btn-primary icon-add"
                                                            (click)="createProForDevice()">{{l('add')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pProduct.isLoading">
                                        <app-image-grid id="gridShow" style="width: 100%;" mode="2" judgeOnline="false"
                                            gridOwner="product" (onOperate)="onOperateProduct($event)"
                                            (onLazyLoad)="getProductByDeviceId($event)" lazy="true"
                                            [(selection)]="ProductSelectionList" [imageList]="pProduct.records">
                                        </app-image-grid>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pProduct.defaultRecordsCountPerPage" #paginatorProduct
                                                (onPageChange)="getProductByDeviceId()"
                                                [totalRecords]="pProduct.totalRecordsCount"
                                                [rowsPerPageOptions]="pProduct.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pProduct.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('Coupon')}}" class="pt-5" customClass="m-tabs__item icon-hongbao"
                                *ngIf="checkAbility('Coupon')&&isGranted('Pages.Tenant.Coupons')&&appSession.tenant"
                                (selectTab)="getCouponByDeviceId()">
                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center mb-4">
                                                <div class="col-4">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <div class="input-group">
                                                            <input [(ngModel)]="couponFilterText"
                                                                name="couponFilterText"
                                                                (keyup.enter)="getCouponByDeviceId()" autoFocus
                                                                class="form-control m-input" [placeholder]="l('name')"
                                                                type="text">
                                                            <span class="input-group-btn">
                                                                <button (click)="getCouponByDeviceId()"
                                                                    class="btn btn-primary" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-8" style="text-align: right;"
                                                    *ngIf="isGranted('Pages.Tenant.Coupons.Publish')">
                                                    <div class="form-group">
                                                        <button type="button" (click)="deleteBatchCoupon()"
                                                            class="btn btn-primary blue">
                                                            <i class="icon-piliangcaozuo"></i>
                                                            {{l("deleteBatch")}}</button>
                                                        <button type="button" class="btn btn-primary icon-add"
                                                            (click)="createCouponForDevice()">{{l('add')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pCoupon.isLoading">
                                        <p-table #dataTableCoupon (onLazyLoad)="getCouponByDeviceId($event)"
                                            [value]="pCoupon.records" [rows]="pCoupon.defaultRecordsCountPerPage"
                                            [(selection)]="CouponSelectionList" [paginator]="false" [lazy]="false"
                                            [resizableColumns]="pCoupon.resizableColumns"
                                            [responsive]="pCoupon.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th *ngIf="isGranted('Pages.Tenant.Coupons.Publish')">
                                                        {{l('Actions')}}
                                                    </th>
                                                    <th style="width: 5.0em">
                                                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                    </th>
                                                    <th style="width:5%">{{l('RecordId')}}</th>
                                                    <th>
                                                        <span>{{l('name')}} </span>
                                                    </th>
                                                    <th>{{l('Picture')}}</th>
                                                    <th>
                                                        <span>{{l('CouponUrl')}}</span>
                                                    </th>
                                                    <th>{{l('Status')}}</th>
                                                    <th pSortableColumn="start_time">
                                                        {{l('startTime')}}
                                                        <p-sortIcon field="start_time"></p-sortIcon>
                                                    </th>
                                                    <th pSortableColumn="end_time">{{l('endTime')}}
                                                        <p-sortIcon field="end_time"></p-sortIcon>
                                                    </th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                <tr [pSelectableRow]="record">
                                                    <td *ngIf="isGranted('Pages.Tenant.Coupons.Publish')">
                                                        <div class="btn-group dropdown" dropdown normalizePosition>
                                                            <button class="dropdown-toggle btn btn-sm btn-primary"
                                                                data-toggle="dropdown" dropdownToggle
                                                                aria-haspopup="true" aria-expanded="false">
                                                                <i class="fa fa-cog"></i>
                                                                <span class="caret"></span> {{l("Actions")}}
                                                            </button>
                                                            <ul class="dropdown-menu" *dropdownMenu>
                                                                <li>
                                                                    <a class="icon-icon-test dropdown-item"
                                                                        (click)="deleteDeviceCoupon(record)">{{l('Delete')}}</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                    </td>
                                                    <td> {{transCouponIndex(i)}}</td>
                                                    <td>{{record.title}}</td>
                                                    <td>
                                                        <img [src]="fixFileUrl(record.pictures)" style="width: 33px;"
                                                            (error)="fixPic($event)" />
                                                    </td>
                                                    <td>
                                                        <span>
                                                            {{record.url}}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span *ngIf="record['auditStatus']==1"
                                                            class="label label-success label-inline">{{l("Online")}}</span>
                                                        <span *ngIf="record['auditStatus']==0"
                                                            class="label label-dark label-inline">{{l("Offline")}}</span>
                                                    </td>
                                                    <td>{{record.start_time| date : "yyyy/MM/dd"}}</td>
                                                    <td>{{record.end_time| date : "yyyy/MM/dd"}}</td>

                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="emptymessage" let-records>
                                                <tr *ngIf="pCoupon.records">
                                                    <td colspan="9">
                                                        <img class="emptymessage"
                                                            src="/assets/common/images/placeholder/couponHolder.png" />
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pCoupon.defaultRecordsCountPerPage" #paginatorCoupon
                                                (onPageChange)="getCouponByDeviceId()"
                                                [totalRecords]="pCoupon.totalRecordsCount"
                                                [rowsPerPageOptions]="pCoupon.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pCoupon.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('Activities')}}" class="pt-5" [active]="initTab=='activity'"
                                customClass="m-tabs__item icon-huodong"
                                *ngIf="checkAbility('Activities')&&isGranted('Pages.Tenant.Activities')"
                                (selectTab)="getActivityByDeviceId()">
                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center m--margin-bottom-10">
                                                <div class="col-4">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <div class="input-group">
                                                            <input [(ngModel)]="activityFilterText"
                                                                name="activityFilterText"
                                                                (keyup.enter)="getActivityByDeviceId()" autoFocus
                                                                class="form-control m-input" [placeholder]="l('name')"
                                                                type="text">
                                                            <span class="input-group-btn">
                                                                <button (click)="getActivityByDeviceId()"
                                                                    class="btn btn-primary" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pActivity.isLoading">
                                        <p-table #dataTableActivity (onLazyLoad)="getActivityByDeviceId($event)"
                                            [value]="pActivity.records" [rows]="pActivity.defaultRecordsCountPerPage"
                                            [(selection)]="ActivitySelectionList" [paginator]="false" [lazy]="false"
                                            [resizableColumns]="pActivity.resizableColumns"
                                            [responsive]="pActivity.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th>{{l('Actions')}}</th>
                                                    <th style="width: 5.0em">
                                                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                    </th>
                                                    <th style="width:5%">{{l('RecordId')}}</th>
                                                    <th>
                                                        <span>{{l('name')}} </span>
                                                    </th>
                                                    <th>{{l('Logo')}}</th>
                                                    <th>
                                                        <span>{{l('ActivitySponsor')}}</span>
                                                    </th>
                                                    <th>
                                                        {{l('startTime')}}
                                                    </th>
                                                    <th>
                                                        {{l('endTime')}}
                                                    </th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                <tr [pSelectableRow]="record">
                                                    <td>
                                                        <div class="btn-group dropdown" dropdown normalizePosition>
                                                            <button class="dropdown-toggle btn btn-sm btn-primary"
                                                                data-toggle="dropdown" dropdownToggle
                                                                aria-haspopup="true" aria-expanded="false">
                                                                <i class="fa fa-cog"></i>
                                                                <span class="caret"></span> {{l("Actions")}}
                                                            </button>
                                                            <ul class="dropdown-menu" *dropdownMenu>
                                                                <li>
                                                                    <a class="icon-yingyong dropdown-item"
                                                                        (click)="gameSetup(record)">{{l('Game')}}</a>
                                                                </li>
                                                                <li
                                                                    *ngIf="isGranted('Pages.Tenant.Activities.Edit')&&record.isMine!==false">
                                                                    <a (click)="editActivity(record)"
                                                                        class="icon-bianji dropdown-item">{{l('Activities')}}</a>
                                                                </li>
                                                                <li>
                                                                    <a (click)="showActivityData(record)"
                                                                        class="icon-artboard13 dropdown-item">{{l('Dashboard')}}</a>
                                                                </li>
                                                                <li
                                                                    *ngIf="isGranted('Pages.Tenant.Activities.Publish')&&record.isMine!==false">
                                                                    <a class="icon-icon-test dropdown-item"
                                                                        (click)="deleteDeviceActivity(record)">{{l('Delete')}}</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                    </td>
                                                    <td> {{transActivityIndex(i)}}</td>
                                                    <td>{{record.activity.name}}</td>
                                                    <td>
                                                        <img [src]="fixFileUrl(record.activity.activityLogoPath)"
                                                            style="width: 33px;" (error)="fixPic($event)" />
                                                    </td>
                                                    <td>
                                                        <span>
                                                            {{record.activity.organizer}}
                                                        </span>
                                                    </td>
                                                    <td>{{record.activity.openDate| date : "yyyy/MM/dd"}}</td>
                                                    <td>{{record.activity.endDate| date : "yyyy/MM/dd"}}</td>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="emptymessage" let-records>
                                                <tr *ngIf="pActivity.records">
                                                    <td colspan="8">
                                                        <img class="emptymessage"
                                                            src="/assets/common/images/placeholder/deviceHolder.png" />
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pActivity.defaultRecordsCountPerPage"
                                                #paginatorActivity (onPageChange)="getActivityByDeviceId()"
                                                [totalRecords]="pActivity.totalRecordsCount"
                                                [rowsPerPageOptions]="pActivity.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pActivity.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('Control')}}" class="pt-5" customClass="m-tabs__item icon-kongzhi"
                                *ngIf="checkAbility('Control')&&isGranted('Pages.Tenant.Devices.Control')"
                                (selectTab)="selectControl()">
                                <div class="row">
                                    <div class="col-4" *ngIf="checkControlItem('screenShot')">
                                        <div class="panel panel-default" [busyIf]="screenLoading"
                                            style="position:relative;">
                                            <div class="panel-heading text-center">{{l('screenShot')}}</div>
                                            <div class="panel-body" *ngIf="screenUrl">
                                                <img style="width: 100%;" class="img-responsive" [src]="screenUrl">
                                            </div>
                                            <div class="panel-footer text-center">
                                                <button type="button" class="btn btn-primary" (click)="screenShot()"
                                                    type="button">{{l('screenShot')}}</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-8" *ngIf="checkControlItem('SoftwareManage')">

                                        <!-- host下可以编辑和保存 -->
                                        <div class="panel panel-default" *ngIf="!appSession.tenant">
                                            <div class="panel-heading">{{l('AppPod')}}</div>
                                            <div class="panel-body">
                                                <div class="row">
                                                    <div class="form-group m-form__group align-items-center col-6">
                                                        <label>{{l('AppPodNowVersion')}}</label>
                                                        <span class="form-control"
                                                            *ngIf="targetAppPodVersion.currentVersion">{{targetAppPodVersion.currentAppPodName}}
                                                            {{targetAppPodVersion.currentVersion}}</span>
                                                        <span class="form-control"
                                                            *ngIf="!targetAppPodVersion.currentVersion">{{l('noAppPodVersion')}}</span>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="form-group m-form__group align-items-center col-6">
                                                        <label>{{l('AppPodTargetVersion')}}</label>
                                                        <select class="form-control"
                                                            [(ngModel)]="appPod.targetAppPodVersionId"
                                                            name="targetAppPodVersionId"
                                                            [value]="targetAppPodVersion.targetAppPodVersionId">
                                                            <option value="">{{l('noAppPodVersion')}}</option>
                                                            <option [value]="item.id" *ngFor="let item of versionList">
                                                                {{item.appPodName}}
                                                                {{item.version}}</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group col-6">
                                                        <label class="checkbox checkbox-primary" for="isLock"
                                                            style="position:relative;top:40px;" (click)="changeClick()">
                                                            <input type="checkbox" [(ngModel)]="appPod.isLock"
                                                                name="isLock">
                                                            {{l('isLocked')}}
                                                            <span></span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="form-group m-form__group align-items-center">
                                                    <div class="form-group">
                                                        <label class="col-form-label">AppPod {{l('Set')}}</label>
                                                        <textarea rows="5" class="form-control"
                                                            [(ngModel)]="appPod.extensionData"
                                                            name="extensionData"></textarea>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <div class="col-2  offset-10">
                                                        <button type="button" class="btn btn-primary btn-block"
                                                            type="button" (click)="saveApppod()">{{l('Save')}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 非host只能查看 -->
                                        <div class="panel panel-default" *ngIf="appSession.tenant">
                                            <div class="panel-heading">{{l('AppPod')}}</div>
                                            <div class="panel-body">
                                                <div class="row">
                                                    <div class="form-group m-form__group align-items-center col-6">
                                                        <label>{{l('AppPodNowVersion')}}</label>
                                                        <span class="form-control"
                                                            *ngIf="targetAppPodVersion.currentVersion">{{targetAppPodVersion.currentAppPodName}}
                                                            {{targetAppPodVersion.currentVersion}}</span>
                                                        <span class="form-control"
                                                            *ngIf="!targetAppPodVersion.currentVersion">{{l('noAppPodVersion')}}</span>
                                                    </div>
                                                    <div class="form-group col-6">
                                                        <label class="checkbox checkbox-primary" for="isLocked"
                                                            style="position:relative;top:40px;">
                                                            <input type="checkbox" [(ngModel)]="appPod.isLock"
                                                                name="isLock" readonly>
                                                            {{l('isLocked')}}
                                                            <span></span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="form-group m-form__group align-items-center">
                                                    <div class="form-group">
                                                        <label class="col-form-label">AppPod {{l('Set')}}</label>
                                                        <textarea rows="5" class="form-control"
                                                            [(ngModel)]="appPod.extensionData" name="extensionData"
                                                            readonly></textarea>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>


                                        <div class="panel panel-default">
                                            <div class="panel-heading">{{l('deviceControl')}}</div>
                                            <div class="panel-body">
                                                <form action=""
                                                    class="form-horizontal ng-untouched ng-pristine ng-valid"
                                                    novalidate="">
                                                    <div class="form-group row">
                                                        <label class="col-3 control-label" for="resourceUpdate"
                                                            style="line-height: 2.5rem;">{{l('lastResUpdateTime')}}</label>
                                                        <div class="col-7">
                                                            <span class="form-control">{{(device.latestResourceUpdateTime |
                                                            date:"yyyy-MM-dd HH:mm")||"-"}}</span>
                                                        </div>
                                                        <div class="col-2">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="updateResource()"
                                                                type="button">{{l('updateResource')}}</button>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-2 offset-8">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="restart()">{{l('restartMachine')}}</button>
                                                        </div>
                                                        <div class="col-2">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="shutdown()">{{l('closeMachine')}}</button>
                                                        </div>
                                                    </div>

                                                    <div class="form-group row">
                                                        <div class="col-2 offset-6">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="closeSoftware()">{{l('closeApp')}}</button>
                                                        </div>
                                                        <!-- <div class="col-2">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="restartSoftware()">{{l('restartApp')}}</button>
                                                        </div> -->
                                                        <div class="col-2">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="closeAppPod()">{{l('closeAppPod')}}</button>
                                                        </div>
                                                        <div class="col-2">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="clearCache()">{{l('clearCache')}}</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <div *ngIf="controlList.length" class="panel panel-default">
                                            <div class="panel-heading">{{l('changeApp')}}</div>
                                            <div class="panel-body" style="padding-bottom:30px;">
                                                <!-- <div>
                                                <a class="request-fullscreen request-fullscreen-modal toggle-active">
                                                    <span class="ad ad-screen-full fs18"></span>
                                                </a>
                                            </div> -->
                                                <!-- <div class="modal-body flex-wrap flex-content"> -->
                                                <div class="row">
                                                    <div class="col-3 text-center"
                                                        *ngFor="let record of controlList;let i = index"
                                                        style="height:120px;line-height:120px;margin-bottom:30px;">
                                                        <img [src]="fixFileUrl(record.largeImageUrl)"
                                                            [alt]="record.alias" (click)="switchApp(record)"
                                                            style="height:100%;" />
                                                        <div style="line-height:30px;">{{record.name}}</div>
                                                    </div>
                                                </div>
                                                <!-- </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" *ngIf="checkControlItem('PriceTag')">
                                    <div class="col-12">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">{{l('PriceTag')}}</div>
                                            <div class="panel-body">
                                                <form action=""
                                                    class="form-horizontal ng-untouched ng-pristine ng-valid"
                                                    novalidate="">
                                                    <div class="form-group row">
                                                        <label class="col-4 control-label" for="resourceUpdate"
                                                            style="line-height: 2.5rem;">{{l('lastResUpdateTime')}}</label>
                                                        <div class="col-4">
                                                            <span class="form-control">{{(device.latestResourceUpdateTime |
                                                                date:"yyyy-MM-dd HH:mm")||"-"}}</span>
                                                        </div>

                                                    </div>

                                                    <div class="form-group row">
                                                        <div class="col-4">
                                                            <span *ngIf="device.isRegistered">{{l('isbinded')}}</span>
                                                            <span *ngIf="!device.isRegistered">{{l('unbinded')}}</span>
                                                        </div>
                                                        <div class="col-2" *ngIf="!device.isRegistered">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="bindPriceTag()">{{l('bindPriceTag')}}</button>
                                                        </div>
                                                        <div class="col-2" *ngIf="device.isRegistered">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="unbindPriceTag()">{{l('unbindPriceTag')}}</button>
                                                        </div>
                                                        <div class="col-2">
                                                            <button type="button" class="btn btn-primary btn-block"
                                                                (click)="lightUp()">{{l('lightUp')}}</button>
                                                        </div>
                                                    </div>


                                                </form>
                                                <div class="row">
                                                    <div class="col-4" *ngIf="eslBindSku.defaultSku">
                                                        <label>{{l('Default')}}sku</label>
                                                        <app-image-grid mode="-1" gridOwner="product"
                                                            [imageList]="[eslBindSku.defaultSku]"></app-image-grid>
                                                    </div>
                                                    <div class="col-4" *ngIf="eslBindSku.bindSku">
                                                        <label>{{l('isbinded')}}sku</label>
                                                        <app-image-grid mode="-1" gridOwner="product"
                                                            [imageList]="[eslBindSku.bindSku]"></app-image-grid>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </tab>
                            <tab heading="{{l('thirdPartyMsg')}}" class="pt-5" customClass="m-tabs__item icon-disanfangdanbao"
                                *ngIf="checkAbility('thirdPartyMsg')" (selectTab)="getTokenIdList()">
                                <div class="row" *ngIf="!device.extraDeviceId">
                                    <div class="col-12 text-right">
                                        <select class="form-control" [(ngModel)]="externalAccessTokenInfoId"
                                            name="externalAccessTokenInfoId"
                                            style="width: 25%;display: inline-block;margin-right: 1rem;">
                                            <option *ngFor="let item of externalAccessList" [value]="item.id">
                                                {{item.taobao_user_nick}}</option>
                                        </select>
                                        <button type="button" [disabled]="!externalAccessTokenInfoId"
                                            class="btn btn-primary" type="button" (click)="registerDeviceToTaobao()">
                                            <i class="icon-zhuce"></i>
                                            {{l('DeviceRegister')}}
                                        </button>
                                    </div>
                                </div>
                                <!-- host下允许编辑taobaoDeviceId -->
                                <div class="row" *ngIf="device.extraDeviceId&&!appSession.tenant">
                                    <div class="col-12 text-right">
                                        <button type="button" class="btn btn-primary" type="button"
                                            (click)="saveTaobaoDeviceId()">
                                            <i></i>
                                            {{l('Save')}}
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <label>{{l('outId')}}</label>
                                        <span class="form-control" *ngIf="!device.extraDeviceId||appSession.tenant">
                                            {{device.extraDeviceId || "-"}}
                                        </span>

                                        <input class="form-control" type="text"
                                            *ngIf="device.extraDeviceId&&!appSession.tenant"
                                            [(ngModel)]="taobaoDeviceId" name="taobaoDeviceId">

                                    </div>
                                    <div class="col-6">
                                        <label>{{l('createTime')}}</label>
                                        <span class="form-control">
                                            {{(device.taobaoRegistTime | date:"yyyy-MM-dd HH:mm")||"-"}}
                                        </span>
                                    </div>
                                </div>
                            </tab>
                            <!-- *ngIf="checkAbility('Statistics')&&notHost" -->
                            <tab heading="{{l('Statistics')}}" *ngIf="checkAbility('Statistics')&&notHost"  class="pt-5" customClass="m-tabs__item icon-shuju" (selectTab)="draw()">
                                <div class="m-portlet" origin [busyIf]="dashboardsCount!=5">
                                    <div class="m-portlet__body  m-portlet__body--no-padding">
                                        <div class="row m-row--no-padding m-row--col-separator-xl">
                                            <div *ngFor="let stats of dashboards;let i = index">

                                                <div style="width:25%;min-width:250px;"
                                                    *ngIf="(i==0&&isGranted('Pages.Softwares'))||i>0">
                                                    <div class="m-widget24">
                                                        <div class="m-widget24__item">
                                                            <h4 class="m-widget24__title">
                                                                {{l(stats.name)}}
                                                            </h4>
                                                            <br>
                                                            <span class="m-widget24__desc">
                                                                {{l(stats.name+'Count')}}
                                                            </span>
                                                            <span class="m-widget24__stats m--font-brand">
                                                                <span [ngStyle]="{'color':colors[i]}">
                                                                    {{stats.count}}
                                                                </span>
                                                            </span>
                                                            <div class="m--space-10"></div>
                                                            <div class="progress m-progress--sm">
                                                                <div class="progress-bar"
                                                                    [ngStyle]="{'background-color':colors[i],'width':'100%'}"
                                                                    role="progressbar" aria-valuenow="100"
                                                                    aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                            <span class="m-widget24__change">
                                                                Change
                                                            </span>
                                                            <span class="m-widget24__number">
                                                                <span class="counterup">100</span>%
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="col-12" [busyIf]="deviceRunningLoading">
                                        <label>{{l('deviceRunningStatusChart')}} | {{l('deviceRunningTotalTime')}} :
                                            {{deviceRunningTotalTime}}</label>
                                        <label class="chartLabel row">
                                            <div class="col-5 offset-7">
                                                <div class="input-group">
                                                    <date-range-picker needInitDate="true"
                                                        [dateRangePickerOptions]='{ "opens": "left"}'
                                                        style="width: 80%;position: relative;"
                                                        name="SampleDateRangePicker" [(startDate)]="startDate1"
                                                        [(endDate)]="endDate1" rangeMode="history">
                                                    </date-range-picker>
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-primary"
                                                            (click)="drawDeviceStatusChart()">{{l('search')}}</button>
                                                    </span>
                                                </div>
                                            </div>
                                        </label>
                                        <div class="form-group">
                                            <app-charts chartId="deviceRunningStatusChart" chartType="Line0" #chart1>
                                            </app-charts>
                                        </div>
                                    </div>
                                    <div class="col-12" [busyIf]="deviceProductClickLoading">
                                        <label>{{l('deviceProductClickChart')}}</label>
                                        <label class="chartLabel row">
                                            <div class="col-4 offset-5">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <date-range-picker
                                                            [dateRangePickerOptions]='{ "opens": "left","singleDatePicker":type=="hh"}'
                                                            needInitDate="true" #dateranger
                                                            style="width: 80%;position: relative;" class="fix"
                                                            name="dataDateRangePicker" [(startDate)]="startDate2"
                                                            needInitDate="true" [(endDate)]="endDate2"
                                                            [allowFutureDate]="true">
                                                        </date-range-picker>
                                                        <!-- <span class="input-group-btn">
                                                        <button (click)="drawBehaviorChart()" class="btn btn-primary"
                                                            type="button">
                                                            <i class="icon-sousuo-sousuo"></i>
                                                        </button>
                                                    </span> -->
                                                        <span class="input-group-btn">
                                                            <button type="button" class="btn btn-primary"
                                                                (click)="drawBehaviorChart()">{{l('search')}}</button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-3">
                                                <div class="form-group">
                                                    <div class="btn-group btn-group-devided" data-toggle="buttons">
                                                        <label class="btn m-btn--pill btn-secondary"
                                                            [ngClass]="{'active': type == 'mm'}"
                                                            (click)="changeViewType('mm')">
                                                            <input type="radio" name="dataChartType" value="mm"
                                                                class="toggle">
                                                            {{l("month")}}
                                                        </label>
                                                        <label class="btn m-btn--pill btn-secondary"
                                                            [ngClass]="{'active': type == 'dd'}"
                                                            (click)="changeViewType('dd')">
                                                            <input type="radio" name="dataChartType" value="dd"
                                                                class="toggle">
                                                            {{l("day")}}
                                                        </label>
                                                        <label class="btn m-btn--pill btn-secondary"
                                                            [ngClass]="{'active': type == 'hh'}"
                                                            (click)="changeViewType('hh')">
                                                            <input type="radio" name="dataChartType" value="hh"
                                                                class="toggle">
                                                            {{l("hour")}}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </label>

                                        <div class="form-group">
                                            <app-charts chartId="deviceProductClickChart" chartType="Line" #chart2>
                                            </app-charts>
                                        </div>
                                    </div>

                                    <div class="col-12" style="margin-top:50px;" [busyIf]="activityLoading">
                                        <label>{{l('activityChart')}}</label>
                                        <label class="chartLabel row">
                                            <div class="col-5 offset-7">
                                                <div class="input-group">
                                                    <date-range-picker needInitDate="true"
                                                        [dateRangePickerOptions]='{ "opens": "left"}'
                                                        style="width: 80%;position: relative;"
                                                        name="SampleDateRangePicker" [(startDate)]="startDate3"
                                                        [(endDate)]="endDate3" rangeMode="history">
                                                    </date-range-picker>
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-primary"
                                                            (click)="drawActivityChart()">{{l('search')}}</button>
                                                    </span>
                                                </div>
                                            </div>
                                        </label>
                                        <div>
                                            <table id="table">
                                                <tr>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/interactiveCount.png">
                                                            <div class="div1" style="color:#9abc32;">
                                                                {{activityData.interactiveCount}}</div>
                                                            <div class="div2">{{l('interactiveCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/fansCount.png">
                                                            <div class="div1" style="color:#4ec83b;">
                                                                {{activityData.fansCount}}</div>
                                                            <div class="div2">{{l('fansCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/shareCount.png">
                                                            <div class="div1" style="color:#9abc32;">
                                                                {{activityData.shareCount}}</div>
                                                            <div class="div2">{{l('shareCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/viewCount.png">
                                                            <div class="div1" style="color:#cb6fd7;">
                                                                {{activityData.viewCount}}</div>
                                                            <div class="div2">{{l('viewCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/likeCount.png">
                                                            <div class="div1" style="color:#d53f40;">
                                                                {{activityData.likeCount}}</div>
                                                            <div class="div2">{{l('likeCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/spreadCount.png">
                                                            <div class="div1" style="color:#6fb3e0;">
                                                                {{activityData.spreadCount}}</div>
                                                            <div class="div2">{{l('spreadCount')}}</div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/genderRatio.png">
                                                            <div class="div1" style="color:#cb6fd7;">
                                                                {{activityData.maleCount}}:{{activityData.femaleCount}}
                                                            </div>
                                                            <div class="div2">{{l('genderRatio')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/awardCount.png">
                                                            <div class="div1" style="color:#f79263;">
                                                                {{activityData.awardCount}}</div>
                                                            <div class="div2">{{l('awardCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/gameCount.png">
                                                            <div class="div1" style="color:#00b5a4;">
                                                                {{activityData.gameCount}}</div>
                                                            <div class="div2">{{l('gameCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/offlineCount.png">
                                                            <div class="div1" style="color:#3983c2;">
                                                                {{activityData.offlineCount}}</div>
                                                            <div class="div2">{{l('offlineCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/offlineStopCount.png">
                                                            <div class="div1" style="color:#e8b110;">
                                                                {{activityData.offlineStopCount}}</div>
                                                            <div class="div2">{{l('offlineStopCount')}}</div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="position:relative;">
                                                            <img src="/assets/common/images/chart/offlineStopRatio.png">
                                                            <div class="div1" style="color:#f79263;">
                                                                {{activityData.offlineStopRatio}}</div>
                                                            <div class="div2">{{l('offlineStopRatio')}}</div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="form-group">
                                            <app-charts chartId="ActivityChart" chartType="Line" #chart3></app-charts>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('cargoManagement')}}" class="pt-5" (selectTab)="getSingleShelf()"
                                customClass="m-tabs__item icon-shangpinliebiao"
                                *ngIf="checkAbility('cargoManagement')">
                                <tabset class="tab-container tabbable-line">
                                    <tab heading="{{l('detailMessage')}}" customClass="m-tabs__item">
                                        <div class="freeze-ui" *ngIf="ShelfInfoLoading"></div>

                                        <div class="row">
                                            <div class="form-group col-4">
                                                <label class="control-label" for="length">{{l('length')}} (cm)</label>
                                                <input class="form-control" id="length" name="length" type="number"
                                                    [(ngModel)]="singleShelfData.resolution_Length">
                                            </div>
                                            <div class="form-group col-4">
                                                <label class="control-label" for="height">{{l('height')}} (cm)</label>
                                                <input class="form-control" id="height" name="height" type="number"
                                                    [(ngModel)]="singleShelfData.resolution_Height">
                                            </div>
                                            <div class="form-group col-4">
                                                <label class="control-label" for="width">{{l('thickness')}} (cm)</label>
                                                <input class="form-control" id="width" name="width" type="number"
                                                    [(ngModel)]="singleShelfData.resolution_Width">
                                            </div>

                                            <div class="form-group col-4">
                                                <label class="control-label"
                                                    for="outerPartitionHeight">{{l('outerPartitionHeight')}}
                                                    (cm)</label>
                                                <input class="form-control" id="outerPartitionHeight"
                                                    name="outerPartitionHeight" type="number"
                                                    [(ngModel)]="singleShelfData.outerPartitionHeight">
                                            </div>
                                            <div class="form-group col-4">
                                                <label class="control-label"
                                                    for="layerPartitionHeight">{{l('layerPartitionHeight')}}
                                                    (cm)</label>
                                                <input class="form-control" id="layerPartitionHeight"
                                                    name="layerPartitionHeight" type="number"
                                                    [(ngModel)]="singleShelfData.layerPartitionHeight">
                                            </div>
                                            <div class="form-group col-4">
                                                <label class="control-label" for="footerHeight">{{l('footerHeight')}}
                                                    (cm)</label>
                                                <input class="form-control" id="footerHeight" name="footerHeight"
                                                    type="number" [(ngModel)]="singleShelfData.footerHeight">
                                            </div>

                                            <div class="form-group col-4">
                                                <label class="control-label" for="startPoint_X">{{l('startPoint_X')}}
                                                    (cm)</label>
                                                <input class="form-control" id="startPoint_X" name="startPoint_X"
                                                    type="number" [(ngModel)]="singleShelfData.startPoint_X">
                                            </div>
                                            <div class="form-group col-4">
                                                <label class="control-label" for="startPoint_Y">{{l('startPoint_Y')}}
                                                    (cm)</label>
                                                <input class="form-control" id="startPoint_Y" name="startPoint_Y"
                                                    type="number" [(ngModel)]="singleShelfData.startPoint_Y">
                                            </div>
                                            <div class="form-group col-4">
                                                <label class="control-label"
                                                    for="shelfDirectionAngle">{{l('shelfDirectionAngle')}}</label>
                                                <input class="form-control" id="shelfDirectionAngle"
                                                    name="shelfDirectionAngle" type="number"
                                                    [(ngModel)]="singleShelfData.shelfDirectionAngle">
                                            </div>

                                        </div>

                                        <div class="row" style="margin-top:2rem;">
                                            <div class="form-group col-12" style="margin-bottom: 0 !important;">
                                                <label class="control-label">{{l('row')}} : </label>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 text-center">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label style="display: block;">&nbsp;</label>
                                                    <button type="button" class="btn btn-primary"
                                                        (click)="singleShelfData.layers.unshift({})">
                                                        {{l("Create")}}{{l("row")}}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-1">
                                                <label class="control-label"></label>
                                            </div>
                                            <div class="form-group col-3">
                                                <label class="control-label">{{l('column')}}{{l('amount')}}</label>
                                            </div>

                                            <div class="form-group col-3">
                                                <label class="control-label">{{l('row')}}{{l('height')}} (cm)</label>
                                            </div>
                                        </div>

                                        <div class="row" *ngFor="let layer of singleShelfData.layers;index as index">
                                            <div class="form-group col-1" style="line-height: 3rem;text-align: center;">
                                                {{singleShelfData.layers.length-index}}
                                            </div>
                                            <div class="form-group col-3">
                                                <input class="form-control" [ngModelOptions]="{standalone: true}"
                                                    type="number" [(ngModel)]="layer.cargoRoadCount"
                                                    [readonly]="layer.layerId">
                                            </div>
                                            <div class="form-group col-3">
                                                <input class="form-control" [ngModelOptions]="{standalone: true}"
                                                    type="number" [(ngModel)]="layer.layerHeight">
                                            </div>
                                            <div class="form-group col-3">
                                                <button type="button" class="btn btn-primary"
                                                    (click)="singleShelfData.layers.splice(index,1)">
                                                    {{l("Delete")}}{{l("row")}}
                                                </button>
                                            </div>
                                        </div>



                                        <div class="row">
                                            <div class="col-12 text-right">
                                                <div class="form-group m-form__group align-items-center">
                                                    <label style="display: block;">&nbsp;</label>
                                                    <button type="button" class="btn btn-primary"
                                                        [buttonBusy]="ShelfInfoLoading"
                                                        (click)="AddOrUpdateShelfInfo()">
                                                        {{l("Save")}}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                    </tab>



                                    <tab heading="{{l('cargoLaneInfo')}}" customClass="m-tabs__item">

                                        <div class="freeze-ui" *ngIf="ShelfInfoLoading"></div>

                                        <div style="width:100%;position:relative;">

                                            <div style="width:850px;margin:0 auto;position:relative;"
                                                *ngFor="let layer of cargoUIList"
                                                [ngStyle]="{height:layer.layerHeight/singleShelfData.resolution_Length*800+'px'}">

                                                <div style="width:800px;height:100%;display:inline-flex">
                                                    <div style="height:100%;outline:1px solid #000;position:relative;cursor:pointer;"
                                                        [ngStyle]="{'flex-grow':column.resolution_Length}"
                                                        *ngFor="let column of layer.cargoRoads"
                                                        (click)="editCargoLane(column)" draggable="true"
                                                        (dragover)="$event.preventDefault();"
                                                        (dragstart)="dragCargo($event,column)"
                                                        (drop)="dropCargo($event,column)">
                                                        <b style="position:absolute;right:5px;top:5px;"
                                                            (click)="$event.stopPropagation();addOrDeleteCargoLane(layer.layerId,column)">x
                                                        </b>
                                                        <div
                                                            style="width:100%;text-align:center;position:absolute;top:50%;transform:translateY(-50%);">
                                                            <div>
                                                                {{column.name}}
                                                                <span *ngIf="column.outerId">({{column.outerId}})</span>
                                                            </div>
                                                            <div *ngIf="column.cargoThings.length==1">
                                                                {{column.cargoThings[0].thingName}}
                                                                ({{column.cargoThings[0].stock}})</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div
                                                    style="display:inline-block;width:50px;position: absolute;top: 50%;transform: translateY(-50%);">
                                                    <button class="btn btn-primary" style="margin-left:10px;"
                                                        type="button" (click)="addOrDeleteCargoLane(layer.layerId)">
                                                        <i class="fa fa-plus" style="padding-right:0;"></i>
                                                    </button>
                                                </div>



                                            </div>

                                            <div style="position:absolute;right:0%;bottom:0%;font-size:5.5rem;">
                                                <div class="icon-shanchu" (drop)="dropCargo($event);" draggable="true"
                                                    (dragover)="$event.preventDefault();">
                                                </div>
                                            </div>
                                        </div>



                                        <div class="m-subheader" style="display:none;">




                                            <div class="d-flex align-items-center">

                                                <div class="mr-auto col-8">
                                                    <div class="row align-items-center m--margin-bottom-10">
                                                        <div class="col-4">
                                                            <div class="form-group m-form__group align-items-center">
                                                                <label>{{l('name')}}</label>
                                                                <div class="input-group">
                                                                    <input [(ngModel)]="cargoFilterText"
                                                                        name="cargoFilterText"
                                                                        class="form-control m-input"
                                                                        (keyup.enter)="getCargoList($event)"
                                                                        [placeholder]="l('SearchWithThreeDot')"
                                                                        type="text">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-4">
                                                            <div class="form-group m-form__group align-items-center">
                                                                <label>{{l('IsEnabled')}}</label>
                                                                <div class="input-group">
                                                                    <select class="form-control"
                                                                        [(ngModel)]="cargoIsEnabled"
                                                                        name="cargoMetaTypeSelect">
                                                                        <option value="">{{l('All')}}</option>
                                                                        <option value="true">{{l('true')}}</option>
                                                                        <option value="false">{{l('false')}}</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div class="form-group m-form__group align-items-center">
                                                                <label style="display: block;">&nbsp;</label>
                                                                <button type="button" class="btn btn-primary"
                                                                    [buttonBusy]="primengTableHelper.isLoading"
                                                                    (click)="getCargoList()">
                                                                    <i class="la la-refresh"></i>
                                                                    {{l("search")}}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="text-right  col-4">
                                                    <div class="btn-group dropdown" dropdown>
                                                        <button class="btn btn-primary" (click)="cargoGoImport()"
                                                            style="margin-left:6px;" type="button">
                                                            <i class="icon-excel"></i> {{l('import')}}
                                                        </button>
                                                        <button
                                                            class="btn btn-primary dropdown-toggle icon-piliangcaozuo"
                                                            style="margin-left:6px;" type="button" id="applyButton"
                                                            data-toggle="dropdown" dropdownToggle aria-haspopup="true"
                                                            aria-expanded="false">
                                                            {{l('batchOperation')}}
                                                        </button>
                                                        <div class="dropdown-menu" *dropdownMenu
                                                            aria-labelledby="applyButton" x-placement="bottom-start">
                                                            <a class="dropdown-item icon-shangxian1"
                                                                (click)="OnCargo()">
                                                                {{l('On')}}
                                                            </a>
                                                            <a class="dropdown-item icon-xiaxian1" (click)="OffCargo()">
                                                                {{l('Off')}}
                                                            </a>
                                                            <div class="dropdown-divider"></div>
                                                            <a class="dropdown-item icon-shanchu"
                                                                (click)="deleteBatchCargo()">
                                                                {{l('deleteBatch')}}
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <button class="btn btn-primary" (click)="createCargo()"
                                                        type="button">
                                                        <i class="fa fa-plus"></i>
                                                        {{l("CreateCargoLane")}}</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="primeng-datatable-container" style="display:none;"
                                            [busyIf]="pCargo.isLoading">
                                            <p-table #dataTableCargo [value]="pCargo.records"
                                                [rows]="pCargo.defaultRecordsCountPerPage"
                                                [(selection)]="CargoSelectionList" [paginator]="false" [lazy]="false"
                                                [resizableColumns]="pCargo.resizableColumns"
                                                [responsive]="pCargo.isResponsive">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th>{{l('Actions')}}</th>
                                                        <th style="width: 5.0em">
                                                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                        </th>
                                                        <th style="width:5%">{{l('RecordId')}}</th>
                                                        <th>
                                                            <span>{{l('cargoLaneName')}} </span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('outerId')}} </span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('type')}} </span>
                                                        </th>
                                                        <!-- <th style="width:15%;">
                                                        <span>{{l('cargoName')}} - {{l('stock')}}</span>
                                                    </th> -->
                                                        <th style="width:15%;">
                                                            <span>{{l('cargoName')}}</span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('stock')}}</span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('stockCapacity')}} </span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('IsEnabled')}} </span>
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                    <tr [pSelectableRow]="record">
                                                        <td>
                                                            <div class="btn-group dropdown" dropdown normalizePosition>
                                                                <button class="dropdown-toggle btn btn-sm btn-primary"
                                                                    data-toggle="dropdown" dropdownToggle
                                                                    aria-haspopup="true" aria-expanded="false">
                                                                    <i class="fa fa-cog"></i>
                                                                    <span class="caret"></span> {{l("Actions")}}
                                                                </button>
                                                                <ul class="dropdown-menu" *dropdownMenu>
                                                                    <li>
                                                                        <a class="icon-bianji dropdown-item"
                                                                            (click)="editCargoLane(record)">{{l('Edit')}}</a>
                                                                    </li>
                                                                    <li
                                                                        *ngIf="isGranted('Pages.Tenant.Activities.Publish')&&record.isMine!==false">
                                                                        <a class="icon-icon-test dropdown-item"
                                                                            (click)="deleteCargoLane(record)">{{l('Delete')}}</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                        </td>
                                                        <td> {{transCargoIndex(i)}}</td>
                                                        <td><span>{{record.name}}</span></td>
                                                        <td>{{record.outerId}}</td>
                                                        <td>
                                                            <span *ngIf="record.cargoType==0">{{l('orderCargo')}}</span>
                                                            <span
                                                                *ngIf="record.cargoType==1">{{l('randomCargo')}}</span>
                                                        </td>
                                                        <td>
                                                            <span>
                                                                <!-- {{cargoDetailList[i]}} -->
                                                                {{cargoDetailList[i].name}}
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span>
                                                                {{cargoDetailList[i].stock}}
                                                            </span>
                                                        </td>
                                                        <td><span>{{record.stockCapacity}}</span></td>
                                                        <td>
                                                            <span *ngIf="record['isEnabled']"
                                                                class="label label-success label-inline">{{l("On")}}</span>
                                                            <span *ngIf="!record['isEnabled']"
                                                                class="label label-dark label-inline">{{l("Off")}}</span>
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="emptymessage" let-records>
                                                    <tr *ngIf="pCargo.records">
                                                        <td colspan="9">
                                                            <img class="emptymessage"
                                                                src="/assets/common/images/placeholder/productHolder.png" />
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                            <div class="primeng-paging-container">
                                                <p-paginator [rows]="pCargo.defaultRecordsCountPerPage" #paginatorCargo
                                                    (onPageChange)="getCargoList()"
                                                    [totalRecords]="pCargo.totalRecordsCount"
                                                    [rowsPerPageOptions]="pCargo.predefinedRecordsCountPerPage">
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{l('TotalRecordsCount', pCargo.totalRecordsCount)}}
                                                </span>
                                            </div>
                                        </div>
                                    </tab>

                                    <tab heading="{{l('historyInfo')}}" customClass="m-tabs__item"
                                        (selectTab)="showHistory()">
                                        <div class="m-subheader">
                                            <div class="d-flex align-items-center">
                                                <div class="mr-auto col-6">
                                                    <div class="row align-items-center mb-4">
                                                        <div class="col-6">
                                                            <div class="form-group m-form__group align-items-center">
                                                                <label>{{l('name')}}</label>
                                                                <div class="input-group">
                                                                    <input [(ngModel)]="historyFilterText"
                                                                        name="historyFilterText"
                                                                        (keyup.enter)="getHistoryList($event)"
                                                                        class="form-control m-input"
                                                                        [placeholder]="l('SearchWithThreeDot')"
                                                                        type="text">
                                                                    <!-- <span class="input-group-btn">
                                                                    <button (click)="getHistoryList()" class="btn btn-primary"
                                                                        type="button">
                                                                        <i class="icon-sousuo-sousuo"></i>
                                                                    </button>
                                                                </span> -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div class="form-group m-form__group align-items-center">
                                                                <label style="display: block;">&nbsp;</label>
                                                                <button type="button" class="btn btn-primary"
                                                                    [buttonBusy]="primengTableHelper.isLoading"
                                                                    (click)="getHistoryList()">
                                                                    <i class="la la-refresh"></i>
                                                                    {{l("search")}}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="primeng-datatable-container" [busyIf]="pHistory.isLoading">
                                            <p-table #dataTableHistory [value]="pHistory.records"
                                                [rows]="pHistory.defaultRecordsCountPerPage"
                                                [(selection)]="HistorySelectionList" [paginator]="false" [lazy]="false"
                                                [resizableColumns]="pHistory.resizableColumns"
                                                [responsive]="pHistory.isResponsive">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <th style="width:5%">{{l('RecordId')}}</th>
                                                        <th>
                                                            <span>{{l('cargoLaneId')}} </span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('cargoLaneName')}} </span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('type')}} </span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('amount')}} </span>
                                                        </th>
                                                        <th>
                                                            <span>{{l('ProcessTime')}} </span>
                                                        </th>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                    <tr [pSelectableRow]="record">
                                                        <td> {{transHistoryIndex(i)}}</td>
                                                        <td>{{record.cargoRoadId}}</td>
                                                        <td>{{record.name}}</td>

                                                        <td>
                                                            <span
                                                                *ngIf="record.cargoAction=='replenish'">{{l('cargoIn')}}</span>
                                                            <span
                                                                *ngIf="record.cargoAction=='drop'">{{l('cargoOut')}}</span>
                                                        </td>

                                                        <td><span>{{record.quantity}}</span></td>
                                                        <td><span>{{record.creationTime | date:"yyyy-MM-dd HH:mm"}}</span>
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="emptymessage" let-records>
                                                    <tr *ngIf="pHistory.records">
                                                        <td colspan="6">
                                                            <img class="emptymessage"
                                                                src="/assets/common/images/placeholder/productHolder.png" />
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                            <div class="primeng-paging-container">
                                                <p-paginator [rows]="pHistory.defaultRecordsCountPerPage"
                                                    #paginatorHistory (onPageChange)="getHistoryList()"
                                                    [totalRecords]="pHistory.totalRecordsCount"
                                                    [rowsPerPageOptions]="pHistory.predefinedRecordsCountPerPage">
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{l('TotalRecordsCount', pHistory.totalRecordsCount)}}
                                                </span>
                                            </div>
                                        </div>
                                    </tab>
                                </tabset>
                            </tab>
                            <tab heading="{{l('MaintainRecord')}}" *ngIf="checkAbility('MaintainRecord')&&!notHost" class="pt-5" 
                                customClass="m-tabs__item icon-houtaiweihu" (selectTab)="getRecordList()">

                                <div class="row">
                                    <form class="horizontal-form" autocomplete="off">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center mb-4">
                                                <!-- 问题描述查询 -->
                                                <div class="col-3">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <label>{{l('bugDescriptionSearch')}}</label>
                                                        <div class="input-group">
                                                            <input [(ngModel)]="questionFilter" name="metaName"
                                                                autoFocus class="form-control m-input" type="text">
                                                            <span class="input-group-btn">
                                                                <button (click)="getRecordList()"
                                                                    class="btn btn-primary" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- 时间范围筛选 -->
                                                <div class="col-3" style="position:relative;">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <label>{{l('DateRange')}}</label>
                                                        <date-range-picker name="SampleDateRangePicker"
                                                            needInitDate="true" [(startDate)]="StartTime"
                                                            [(endDate)]="EndTime" [showButton]="true"
                                                            (buttonEmit)="getRecordList()">
                                                        </date-range-picker>
                                                    </div>
                                                </div>
                                                <!-- 状态 -->
                                                <div class="col-2">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <label>{{l('auditStatus')}}</label>
                                                        <div class="input-group">
                                                            <select #TypeCombobox class="form-control"
                                                                [(ngModel)]="statusSelect"
                                                                (ngModelChange)="getRecordList()" name="metaTypeSelect2"
                                                                [attr.data-live-search]="false"
                                                                jq-plugin="selectpicker">
                                                                <option value="">{{l('AllTypes')}}</option>
                                                                <option value="0">{{l('unsolved')}}</option>
                                                                <option value="1">{{l('resolving')}}</option>
                                                                <option value="2">{{l('resolved')}}</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4 text-right">
                                                    <label>&nbsp;</label>
                                                    <div class="">
                                                        <!-- <button (click)="deleteRecordList()" class="btn btn-primary blue">
                                                        <i class="icon-piliangcaozuo"></i> {{l("deleteBatch")}}</button> -->
                                                        <button (click)="createRecord()" class="btn btn-primary blue">
                                                            <i class="fa fa-plus"></i> {{l("CreateRecord")}}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="row align-items-center">
                                    <!--<Primeng-Datatable-Start>-->
                                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                        <!-- resizableColumns="primengTableHelper.resizableColumns" -->
                                        <p-table #dataTable (onLazyLoad)="getRecordList($event)"
                                            [value]="primengTableHelper.records"
                                            [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false"
                                            [lazy]="false" [(selection)]="recordCheckedList"
                                            [resizableColumns]="primengTableHelper.resizableColumns"
                                            [responsive]="primengTableHelper.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th style="width: 10%">{{l('Actions')}}</th>
                                                    <!-- <th style="width: 5.0em">
                                                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                    </th> -->
                                                    <th style="width:5%">{{l('RecordId')}}</th>
                                                    <th pSortableColumn="startTime" style="width:12%;">
                                                        {{l('startTime')}}
                                                        <p-sortIcon field="startTime"></p-sortIcon>
                                                    </th>
                                                    <th pSortableColumn="endTime" style="width:12%;">
                                                        {{l('endTime')}}
                                                        <p-sortIcon field="endTime"></p-sortIcon>
                                                    </th>
                                                    <th>{{l('bugDescription')}}</th>
                                                    <th>{{l('solution')}}</th>
                                                    <th style="width:8%;">{{l('theOne')}}</th>
                                                    <th style="width:7%;">{{l('totalMinutes')}}</th>
                                                    <th style="width:8%">{{l('auditStatus')}}</th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                <tr [pSelectableRow]="record">
                                                    <td>
                                                        <div class="btn-group dropdown" dropdown normalizePosition>
                                                            <button type="button"
                                                                class="dropdown-toggle btn btn-sm btn-primary"
                                                                data-toggle="dropdown" dropdownToggle
                                                                aria-haspopup="true" aria-expanded="false">
                                                                <i class="fa fa-cog"></i>
                                                                <span class="caret"></span> {{l("Actions")}}
                                                            </button>
                                                            <ul class="dropdown-menu" *dropdownMenu>
                                                                <li>
                                                                    <a class="icon-bianji dropdown-item"
                                                                        (click)="editRecord(record)">{{l('Edit')}}</a>
                                                                </li>
                                                                <li>
                                                                    <a class="icon-icon-test dropdown-item"
                                                                        (click)="deleteRecord(record)">{{l('Delete')}}</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                    <!-- <td style="width: 5.0em">
                                                        <p-tableCheckbox  [value]="record"></p-tableCheckbox>
                                                    </td> -->
                                                    <td> {{transIndex(i,paginator)}}</td>
                                                    <td>
                                                        <span>{{moment(record.startTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                                                    </td>
                                                    <td>
                                                        <span *ngIf="record.endTime">{{moment(record.endTime).format('YYYY-MM-DD
                                                        HH:mm:ss')}}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span>{{record.question}}</span>
                                                    </td>
                                                    <td>
                                                        <span>{{record.action}}</span>
                                                    </td>
                                                    <td>
                                                        <span>{{record.operator}}</span>
                                                    </td>
                                                    <td>
                                                        <span>{{record.totalMinutes}}{{l("minutes")}}</span>
                                                    </td>
                                                    <td>
                                                        <span *ngIf="record.optStatus==0"
                                                            style="color:#ccc;">{{record.optStatus|deviceStatus}}</span>
                                                        <span *ngIf="record.optStatus==1"
                                                            style="color:#DD0000;">{{record.optStatus|deviceStatus}}</span>
                                                        <span *ngIf="record.optStatus==2"
                                                            style="color:#00DD00;">{{record.optStatus|deviceStatus}}</span>
                                                    </td>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="emptymessage" let-records>
                                                <tr *ngIf="primengTableHelper.records">
                                                    <td colspan="9">
                                                        <img class="emptymessage"
                                                            src="/assets/common/images/placeholder/deviceHolder.png" />
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                #paginator (onPageChange)="getRecordList()"
                                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                    <!--<Primeng-Datatable-End>-->
                                </div>

                            </tab>
                            <tab heading="{{l('FaceData')}}" class="pt-5" customClass="m-tabs__item icon-yonghu"
                                *ngIf="checkAbility('FaceData')&&hasCamera" (selectTab)="getFaceByDeviceId()">
                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center m--margin-bottom-10">
                                                <div class="col-3">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <label>{{l("updateDate")}}</label>
                                                        <div class="input-group">
                                                            <date-range-picker needInitDate="true"
                                                                [dateRangePickerOptions]='{ "opens": "left"}'
                                                                style="width: 80%;position: relative;"
                                                                name="SampleDateRangePicker"
                                                                [(startDate)]="startDateFace" [(endDate)]="endDateFace"
                                                                rangeMode="history">
                                                            </date-range-picker>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-3">
                                                    <div class="form-group">
                                                        <label>{{l("gender")}}</label>
                                                        <select type="text" name="gender" class="form-control"
                                                            [(ngModel)]="faceGender">
                                                            <option value=''>{{l('All')}}</option>
                                                            <option value='male'>{{l('male')}}</option>
                                                            <option value='female'>{{l('female')}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-2">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <label style="display: block;">&nbsp;</label>
                                                        <button type="button" class="btn btn-primary"
                                                            [buttonBusy]="primengTableHelper.isLoading"
                                                            (click)="getFaceByDeviceId()">
                                                            <i class="la la-refresh"></i>
                                                            {{l("search")}}
                                                        </button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pFace.isLoading">
                                        <p-table #dataTableFace (onLazyLoad)="getFaceByDeviceId($event)"
                                            [value]="pFace.records" [rows]="pFace.defaultRecordsCountPerPage"
                                            [(selection)]="FaceSelectionList" [paginator]="false" [lazy]="false"
                                            [resizableColumns]="pFace.resizableColumns"
                                            [responsive]="pFace.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th style="width:5%">{{l('RecordId')}}</th>
                                                    <th>
                                                        <span>{{l('headImage')}}</span>
                                                    </th>
                                                    <th>{{l('updateDate')}}</th>
                                                    <th>
                                                        <span>{{l('gender')}}</span>
                                                    </th>
                                                    <th>
                                                        {{l('age')}}
                                                    </th>
                                                    <th>
                                                        {{l('emotion')}}
                                                    </th>
                                                    <th>
                                                        {{l('other')}}
                                                    </th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                <tr [pSelectableRow]="record">
                                                    <td> {{transFaceIndex(i)}}</td>
                                                    <td>
                                                        <img [src]="fixFileUrl(record.faceUrl)" style="width: 33px;"
                                                            (error)="fixPic($event)" />
                                                    </td>
                                                    <td>{{record.collectionTime| date : "yyyy/MM/dd HH:mm:ss"}}</td>
                                                    <td>
                                                        <span>
                                                            {{record.gender}}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span>
                                                            {{record.age}}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span>
                                                            {{record.emotion}}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        <span>
                                                            {{record.score}}
                                                        </span>
                                                    </td>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="emptymessage" let-records>
                                                <tr *ngIf="pFace.records">
                                                    <td colspan="7">
                                                        <img class="emptymessage"
                                                            src="/assets/common/images/placeholder/deviceHolder.png" />
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pFace.defaultRecordsCountPerPage" #paginatorFace
                                                (onPageChange)="getFaceByDeviceId()"
                                                [totalRecords]="pFace.totalRecordsCount"
                                                [rowsPerPageOptions]="pFace.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pFace.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('childDevice')}}" class="pt-5" customClass="m-tabs__item icon-zuzhijigou"
                                *ngIf="checkAbility('childDevice')" (selectTab)="GetDevicesByGatewayId()">

                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center mb-4">
                                                <div class="col-12" style="text-align: right;"
                                                    *ngIf="isGranted('Pages.Tenant.Coupons.Publish')">
                                                    <div class="form-group">
                                                        <button type="button" (click)="deleteGateway()"
                                                            class="btn btn-primary blue">
                                                            <i class="icon-piliangcaozuo"></i>
                                                            {{l("deleteBatch")}}</button>
                                                        <!-- <button type="button" class="btn btn-primary icon-add" (click)="GetDevicesByGatewayId()">{{l('add')}}</button> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pChild.isLoading">
                                        <p-table #dataTableChild [value]="pChild.records"
                                            [rows]="pChild.defaultRecordsCountPerPage"
                                            [(selection)]="ChildSelectionList" [paginator]="false" [lazy]="false"
                                            [resizableColumns]="pChild.resizableColumns"
                                            [responsive]="pChild.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <!-- <th>{{l('Actions')}}</th> -->
                                                    <th style="width: 5em">
                                                        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                    </th>
                                                    <th style="width:4%">{{l('RecordId')}}</th>
                                                    <th style="width:25%">{{l('Name')}}</th>
                                                    <th>{{l('type')}}</th>
                                                    <th>{{l('Mac')}}</th>
                                                    <th>{{l('hardwareCode')}}</th>
                                                    <th>{{l('outId')}}</th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                <tr [pSelectableRow]="record">
                                                    <td>
                                                        <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                    </td>
                                                    <td> {{transIndexChild(i)}}</td>
                                                    <td>
                                                        <span>{{record.name}}</span>
                                                    </td>
                                                    <td>
                                                        <span
                                                            *ngIf="record.deviceType">{{record.deviceType.name}}</span>
                                                        <span *ngIf="!record.deviceType">-</span>
                                                    </td>
                                                    <td>
                                                        <span>{{record.mac}}</span>
                                                    </td>
                                                    <td>
                                                        <span>{{record.hardwareCode}}</span>
                                                    </td>
                                                    <td>
                                                        <span>{{record.outerId}}</span>
                                                    </td>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="emptymessage" let-records>
                                                <tr *ngIf="pChild.records">
                                                    <td colspan="6">
                                                        <img class="emptymessage"
                                                            src="/assets/common/images/placeholder/deviceHolder.png" />
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pChild.defaultRecordsCountPerPage" #paginatorChild
                                                (onPageChange)="GetDevicesByGatewayId()"
                                                [totalRecords]="pChild.totalRecordsCount"
                                                [rowsPerPageOptions]="pChild.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pChild.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </tab>
                            <tab heading="{{l('counter')}}" class="pt-5" customClass="m-tabs__item icon-shangpinliebiao"
                                *ngIf="checkAbility('counter')" (selectTab)="getCounterDate()">
                                <div class="row align-items-center">
                                    <div class="col-12">
                                        <div class="col-2"
                                            style="margin-right:3rem;margin-bottom:1rem;padding-left: 0;">
                                            <div class="btn-group dropdown" #dropdown1="bs-dropdown" dropdown
                                                [autoClose]="false">
                                                <button class="btn btn-primary dropdown-toggle icon-biaoqian2"
                                                    type="button" id="setTagButton" data-toggle="dropdown"
                                                    dropdownToggle aria-haspopup="true" aria-expanded="false">
                                                    {{l('setTag')}}
                                                </button>
                                                <div class="dropdown-menu" *dropdownMenu aria-labelledby="setTagButton"
                                                    x-placement="bottom-start">
                                                    <form class="px-4 py-3 noPaddingBottom">
                                                        <div class="form-group">
                                                            <input class="form-control" name="tagFilter"
                                                                [placeholder]="l('enterToSearch')"
                                                                [(ngModel)]="tagFilter" (keyup.enter)="filterTags()" />
                                                        </div>
                                                        <div class="form-group beautyScroll noPaddingBottom">
                                                            <app-my-tree #tagTree [(items)]="tagList"
                                                                [config]="tagConfig">
                                                            </app-my-tree>
                                                        </div>
                                                    </form>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="icon-apply dropdown-item"
                                                        (click)="goTag(7)">{{l('Create')+l('Tags')}}</a>
                                                    <a *ngIf="tagIds&&tagIds.length>0" class="icon-apply dropdown-item"
                                                        (click)="dropdown1.hide();setTag()">{{l('setTag')}}</a>
                                                    <!-- <a *ngIf="tagIds&&tagIds.length>0" class="icon-Clearsearch dropdown-item"
                                                    (click)="dropdown1.hide();clearTag()">{{l('clearTag')}}</a> -->
                                                    <a class="icon-jiaoyiguanli dropdown-item"
                                                        (click)="goTag()">{{l('manageTag')}}</a>
                                                </div>
                                            </div>
                                        </div>



                                        <div class="primeng-datatable-container" [busyIf]="pCounter.isLoading">
                                            <p-table #dataTableCounter [value]="pCounter.records"
                                                [rows]="pCounter.defaultRecordsCountPerPage"
                                                [(selection)]="CounterSelectionList" [paginator]="false" [lazy]="false"
                                                [resizableColumns]="pCounter.resizableColumns"
                                                [responsive]="pCounter.isResponsive">
                                                <ng-template pTemplate="header">
                                                    <tr>
                                                        <!-- <th *ngIf="device.deviceTypeId==19" style="width: 5em;" (click)="setAllSelect()"> -->
                                                        <th style="width: 5em;" (click)="setAllSelect()">
                                                            <!-- <p-tableHeaderCheckbox></p-tableHeaderCheckbox> -->
                                                        </th>

                                                        <th style="width:8%">{{l('RecordId')}}</th>
                                                        <th>{{l('Name')}}</th>
                                                        <th>{{l('data')}}</th>
                                                        <th>{{l('tags')}}</th>
                                                        <th>{{l('LastModificationTime')}}</th>

                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                    <tr [pSelectableRow]="record">
                                                        <td (click)="setSelection()">
                                                            <!-- <td *ngIf="device.deviceTypeId==19" (click)="setSelection()"> -->
                                                            <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                        </td>
                                                        <td> {{transIndexCounter(i)}}</td>

                                                        <td>
                                                            {{record.displayName}}
                                                        </td>
                                                        <td>
                                                            <span>{{record.totalCount}}</span>
                                                        </td>
                                                        <td>
                                                            <span>
                                                                <span *ngFor="let item of record.tags"> {{item.value}}
                                                                </span>
                                                            </span>
                                                        </td>
                                                        <td>
                                                            <span *ngIf="record.lastModificationTime">{{record.lastModificationTime
                                                            | date:'yyyy/MM/dd hh:mm'}}</span>
                                                            <span *ngIf="!record.lastModificationTime">-</span>
                                                        </td>

                                                    </tr>
                                                </ng-template>
                                                <ng-template pTemplate="emptymessage" let-records>
                                                    <tr *ngIf="pCounter.records">
                                                        <td colspan="5">
                                                            <img class="emptymessage"
                                                                src="/assets/common/images/placeholder/deviceHolder.png" />
                                                        </td>
                                                    </tr>
                                                </ng-template>
                                            </p-table>
                                            <div class="primeng-paging-container">
                                                <p-paginator [rows]="pCounter.defaultRecordsCountPerPage"
                                                    #paginatorCounter (onPageChange)="getDeviceCounters()"
                                                    [totalRecords]="pCounter.totalRecordsCount"
                                                    [rowsPerPageOptions]="pCounter.predefinedRecordsCountPerPage">
                                                </p-paginator>
                                                <span class="total-records-count">
                                                    {{l('TotalRecordsCount', pCounter.totalRecordsCount)}}
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 notNeedHourForIndexCss">
                                        <div class="m-portlet" origin>
                                            <div class="m-portlet__head">
                                                <div class="m-portlet__head-tools" style="width:100%">
                                                    <div class="form-group row"
                                                        style="margin-bottom: 0.4rem !important;width:100%;">
                                                        <div class="input-group col-8 margin-top-5">
                                                            <date-range-picker
                                                                [dateRangePickerOptions]='{ "opens": "left","singleDatePicker":type=="hh","timePicker":true,"timePicker24Hour":true,parentEl:$$(".notNeedHourForIndexCss")}'
                                                                needInitDate="true" #daterangerCounter
                                                                style="width: 80%;margin-top:0.5rem;"
                                                                name="dataDateRangePicker" [(startDate)]="startTime"
                                                                [(endDate)]="endTime" [allowFutureDate]="true"
                                                                [admitDelete]="false">
                                                            </date-range-picker>
                                                            <span class="input-group-btn">
                                                                <button (click)="getCountByDeviceIds()"
                                                                    class="btn btn-primary fixed-button" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                        <div class="btn-group btn-group-devided col-4"
                                                            data-toggle="buttons" [hidden]="device.deviceTypeId==19">
                                                            <label class="btn m-btn--pill btn-secondary"
                                                                [ngClass]="{'active': typeCounter == 'mm'}"
                                                                (click)="changeViewTypeCounter('mm')"
                                                                style="line-height: 3rem;">
                                                                <input type="radio" name="dataChartTypeCounter"
                                                                    value="mm" class="toggle" style="display: none;">
                                                                {{l("month")}}
                                                            </label>
                                                            <label class="btn m-btn--pill btn-secondary"
                                                                [ngClass]="{'active': typeCounter == 'dd'}"
                                                                (click)="changeViewTypeCounter('dd')"
                                                                style="line-height: 3rem;">
                                                                <input type="radio" name="dataChartTypeCounter"
                                                                    value="dd" class="toggle" style="display: none;">
                                                                {{l("day")}}
                                                            </label>
                                                            <label class="btn m-btn--pill btn-secondary"
                                                                [ngClass]="{'active': typeCounter == 'hh'}"
                                                                (click)="changeViewTypeCounter('hh')"
                                                                style="line-height: 2rem;">
                                                                <input type="radio" name="dataChartTypeCounter"
                                                                    value="hh" class="toggle" style="display: none;">
                                                                {{l("hour")}}
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="m-portlet__body" [busyIf]="dataChartLoading">
                                                <div class="row list-separated">
                                                    <div class="portlet-body-morris-fit morris-chart"
                                                        style="height: 600px;width: 100%;">
                                                        <app-charts #dataChartDiv chartId="dataChartDiv"
                                                            chartType="Line0">
                                                        </app-charts>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div id="heatmap" style="margin:0 auto;"></div>
                                    </div>


                                </div>
                            </tab>
                            <tab heading="{{l('Scheduling')}}" class="pt-5" customClass="m-tabs__item icon-yemian"
                                *ngIf="checkAbility('Scheduling')" (selectTab)="getDeviceSchedulings()">

                                <div class="row align-items-center">
                                    <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                        <div class="m-form m-form--label-align-right">
                                            <div class="row align-items-center m--margin-bottom-10">
                                                <div class="col-4">
                                                    <div class="form-group m-form__group align-items-center">
                                                        <div class="input-group">
                                                            <input [(ngModel)]="ScheduleFilterText"
                                                                name="ScheduleFilterText"
                                                                (keyup.enter)="getDeviceSchedulings()" autoFocus
                                                                class="form-control m-input" [placeholder]="l('name')"
                                                                type="text">
                                                            <span class="input-group-btn">
                                                                <button (click)="getDeviceSchedulings()"
                                                                    class="btn btn-primary" type="button">
                                                                    <i class="icon-sousuo-sousuo"></i>
                                                                </button>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div class="primeng-datatable-container" [busyIf]="pSchedule.isLoading">
                                        <p-table #dataTableSchedule (onLazyLoad)="getDeviceSchedulings($event)"
                                            [value]="pSchedule.records" [rows]="pSchedule.defaultRecordsCountPerPage"
                                            [(selection)]="ScheduleSelectionList" [paginator]="false" [lazy]="false"
                                            [resizableColumns]="pSchedule.resizableColumns"
                                            [responsive]="pSchedule.isResponsive">
                                            <ng-template pTemplate="header">
                                                <tr>
                                                    <th>{{l('Actions')}}</th>
                                                    <th>{{l('RecordId')}}</th>
                                                    <th>{{l('name')}}</th>
                                                    <th>{{l('thumbnail')}}</th>
                                                    <th>
                                                        {{l('startDate')}}
                                                    </th>
                                                    <th>
                                                        {{l('endDate')}}
                                                    </th>
                                                    <th>{{l('description')}}</th>
                                                    <th>{{l('On')}}</th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                <tr [pSelectableRow]="record">
                                                    <td>
                                                        <div class="btn-group dropdown" dropdown normalizePosition>
                                                            <button class="dropdown-toggle btn btn-sm btn-primary"
                                                                data-toggle="dropdown" dropdownToggle
                                                                aria-haspopup="true" aria-expanded="false">
                                                                <i class="fa fa-cog"></i>
                                                                <span class="caret"></span> {{l("Actions")}}
                                                            </button>
                                                            <ul class="dropdown-menu" *dropdownMenu>
                                                                <li>
                                                                    <a (click)="scheduleDetail(record)"
                                                                        class="icon-shangpinliebiao dropdown-item">{{l('detail')}}</a>
                                                                </li>
                                                                <li>
                                                                    <!-- *ngIf="record['isUse']" -->
                                                                    <a (click)="scheduleOpenOrShut(record)"
                                                                        class="icon-star dropdown-item">{{
                                                                            record['isUse'] ? l("Off") :
                                                                            l('On')}}</a>
                                                                </li>
                                                                <li>
                                                                    <a (click)="scheduleDelete(record.adSchedulingParentId)"
                                                                        class="icon-icon-test dropdown-item">{{l('Delete')}}</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                    <td> {{transIndexSchedule(i)}}</td>
                                                    <td>
                                                        <span>{{record.name}}</span>
                                                    </td>
                                                    <td>
                                                        <img [src]="fixFileUrl(record.iconUrl)"
                                                            (error)="showEmpty($event)" />
                                                    </td>
                                                    <td>{{record.activeTime | date : "yyyy/MM/dd"}}</td>
                                                    <td>{{record.endTime| date : "yyyy/MM/dd"}}</td>
                                                    <td>
                                                        <span>{{record.description}}</span>
                                                    </td>
                                                    <th>
                                                        <span *ngIf="record['isUse']"
                                                            class="label label-success label-inline">{{l("On")}}</span>
                                                        <span *ngIf="!record['isUse']"
                                                            class="label label-dark label-inline">{{l("Off")}}</span>
                                                    </th>
                                                </tr>
                                            </ng-template>
                                            <ng-template pTemplate="emptymessage" let-records>
                                                <tr *ngIf="pSchedule.records">
                                                    <td colspan="8">
                                                        <img class="emptymessage"
                                                            src="/assets/common/images/placeholder/deviceHolder.png" />
                                                    </td>
                                                </tr>
                                            </ng-template>
                                        </p-table>
                                        <div class="primeng-paging-container">
                                            <p-paginator [rows]="pSchedule.defaultRecordsCountPerPage"
                                                #paginatorSchedule (onPageChange)="getDeviceSchedulings()"
                                                [totalRecords]="pSchedule.totalRecordsCount"
                                                [rowsPerPageOptions]="pSchedule.predefinedRecordsCountPerPage">
                                            </p-paginator>
                                            <span class="total-records-count">
                                                {{l('TotalRecordsCount', pSchedule.totalRecordsCount)}}
                                            </span>
                                        </div>
                                    </div>
                                </div>


                            </tab>
                        </tabset>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <AdsAlertModal #AdsAlertModal (modalSave)="publishAdsByDeviceId($event)"></AdsAlertModal>
    <AppAlertModal #AppAlertModal (modalSave)="publishAppByDeviceId($event)"></AppAlertModal>
    <ProductAlertModal #ProductAlertModal (modalSave)="publishProductByDeviceId($event)"></ProductAlertModal>
    <CouponAlertModal #CouponAlertModal (modalSave)="publishCouponByDeviceId($event)"></CouponAlertModal>
    <appSettingModal #appSettingModal (modalSave)="getSoftwareByDeviceId($event)"></appSettingModal>
    <createOrEditDeviceRecordModal #createOrEditDeviceRecordModal (modalSave)="getRecordList()">
    </createOrEditDeviceRecordModal>
    <CargoModal #cargoModal (modalSave)="getSingleShelf()"></CargoModal>
    <calendarModal #calendarModal (modalSave)="getDeviceSchedulings()"></calendarModal>